<template>
	<view>
		<text>11</text>
		<div :style="{ fontSize: postFontSize + 'em' }">
			<blog v-for="post in posts" v-bind:key="post.id" v-bind:post="post" @enlarge-text="postFontSize += $event.param1">

				<template v-slot:msg="child">
					{{child.msg}}
				</template>

				<template v-slot:footer>
					<p>footer</p>
				</template>
			</blog>
		</div>
		<button v-on:click="warn('form', $event)">
			submit
		</button>
	</view>
</template>

<script>
	import blog from '../../components/blog-post.vue'
	export default {
		data() {
			return {
				msg: "massage",
				posts: [{
						id: 1,
						title: "title1",
						content: "content1"
					},
					{
						id: 2,
						title: "title2",
						content: "content2"
					},
					{
						id: 3,
						title: "title3",
						content: "content3"
					}
				],
				postFontSize: 1
			};
		},
		components: {
			blog
		},
		methods: {
			warn(msg, event) {
				if (event) {
					event.preventDefault()
				}
				console.log(event)
				alert(msg)
			}
		}
	}
</script>

<style lang="scss">

</style>
